<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        /**
        * 是一个通配符选择器，表示匹配 HTML 页面中的所有元素。
margin: 0; 将所有元素的外边距设置为 0，这样可以消除浏览器默认的外边距，使页面布局更加可控。
padding: 0; 将所有元素的内边距设置为 0，同样是为了消除浏览器默认的内边距。
         */
        * {
            margin: 0;
            padding: 0;
        }

        /**

         */
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            /*开启绝对定位*/
            position: absolute;
            /*指定left兼容IE的left-auto现象*/
            left: 0;
        }

    </style>

    <script type="text/javascript">

        /**
         * 定时器练习-点击按钮后box1向右移动
         * 1.点击按钮以后，开启一个定时器，每隔30ms，让box1的left值增大
         * 2.当box1移动到800px时，使其停止执行动画
         * 3.当用户再次点击按钮时，关闭上一个定时器，开启一个新的定时器
         */
        window.onload = function () {
            //获取box1
            var box1 = document.getElementById("box1");
            //获取btn01
            var btn01 = document.getElementById("btn01");

            //定义一个变量，用来保存定时器的标识
            var timer;

            //点击按钮以后，使box1向右移动（left值增大）
            btn01.onclick = function () {
                //关闭上一个定时器
                clearInterval(timer);

                //开启一个定时器，用来执行动画效果
                timer = setInterval(function () {
                    //获取box1的原来的left值,parseInt并转换为数字
                    var oldValue = parseInt(getStyle(box1, "left"));

                    //在旧值的基础上增加
                    var newValue = oldValue + 1;

                    //判断newValue是否大于800
                    if (newValue > 800) {
                        newValue = 800;
                    }

                    //将新值设置给box1
                    box1.style.left = newValue + "px";

                    //当元素移动到800px时，使其停止执行动画
                    if (newValue === 800) {
                        //达到目标，关闭定时器
                        clearInterval(timer);
                    }
                }, 30);
            };
        };


        /**
         * 公共方法:定义一个函数，用来获取指定元素的当前的样式
         * 参数：
         *        obj 要获取样式的元素
         *        name 要获取的样式名
         */
        function getStyle(obj, name) {
            if (window.getComputedStyle) {
                //正常浏览器的方式，具有getComputedStyle()方法
                return getComputedStyle(obj, null)[name];
            } else {
                //IE8的方式，没有getComputedStyle()方法
                return obj.currentStyle[name];
            }
        }
    </script>
</head>
<body>

<!--移动开关-->
<button id="btn01">点击按钮以后box1向右移动</button>

<br/><br/>

<!--移动容器-->
<div id="box1"></div>

<!--终点线-->
<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>

</body>
</html>
